<template>
    <el-tree 
        :allow-drop="allowDrop" 
        :allow-drag="allowDrag" 
        :data="data" draggable 
        default-expand-all 
        node-key="id" 
        @node-drag-start="handleDragStart" 
        @node-drag-enter="handleDragEnter" 
        @node-drag-leave="handleDragLeave" 
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop" 
        :props='defaultProps'
    />
</template>


<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type { NodeDropType } from 'element-plus/es/components/tree/src/tree.type'
import  treeData  from '@/utils/treeData'
export default defineComponent({
    name: 'oneThree',
    setup() {
        const handleDragStart = (node: Node, ev: DragEvents) => {
            console.log('drag start', '------', node, '111111')
        }
        const handleDragEnter = (
            draggingNode: Node,
            dropNode: Node,
            ev: DragEvents
        ) => {
            console.log('tree drag enter:', '------', dropNode.label, '22222')
        }
        const handleDragLeave = (
            draggingNode: Node,
            dropNode: Node,
            ev: DragEvents
        ) => {
            // console.log('tree drag leave:','------', dropNode.label,'3333333333')
        }
        const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
            // console.log('tree drag over:','------', dropNode.label,'44444444444')
        }
        const handleDragEnd = (
            draggingNode: Node,
            dropNode: Node,
            dropType: NodeDropType,
            ev: DragEvents
        ) => {
            console.log('tree drag end:', '------', dropNode && dropNode.label, '------', dropType, draggingNode, '555555555555')
        }
        const handleDrop = (
            draggingNode: Node,
            dropNode: Node,
            dropType: NodeDropType,
            ev: DragEvents
        ) => {
            console.log('tree drop:', '------', dropNode.label, '------', dropType, '6666666666666')
        }
        const allowDrop = (draggingNode: Node, dropNode: Node, type: NodeDropType) => {
            if (dropNode.data.name === 'Level two 3-1') {
                return type !== 'inner'
            } else {
                return true
            }
        }
        const allowDrag = (draggingNode: Node) => {
            return !draggingNode.data.name.includes('Level three 3-1-1')
        }
        const defaultProps = {
            children:'children',
            label:'name'
        }
        const data = ref(treeData)
        return {
			handleDragStart,
			handleDragEnter,
			handleDragLeave,
			handleDragOver,
			handleDragEnd,
			handleDrop,
			allowDrop,
			allowDrag,
			data,
            defaultProps
		}
    }
})
</script>

